<template>
    <div id="container"></div>
</template>

<script type="text/javascript">
import { Graph, Shape, DataUri, Cell, Color } from '@antv/x6';// Shape定义了节点和边共同属性和方法\DataUri下载

export default {
  name: 'IndexWS',
  components:{
      Cell
  },
  props: {
    fromData:{
      type: String,
      default: undefined,
    },
  },
  data () {
    return {
      graph: undefined,

      graphConfigure: {
        container: undefined,
        autoResize: true,//监听容器大小改变，并自动更新画布大小
        // width: 900,
        height: 350,
        background: {
          color: '#F5F5F6', // 设置画布背景颜色
        },
        // grid: true,//网格线
        resizing: {   //启用调整节点大小的功能。
          enabled: true,
        },
        scroller: { 
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false,
        },
        mousewheel: {// 滚轮缩放
          enabled: true,
          modifiers: ['ctrl', 'meta'],
        },
        connecting: { //连线选项
          snap: true, //自动吸附
          allowBlank: false,// 是否允许连接到画布空白位置的点
          allowNode: false,// 是否允许边链接到节点（非节点上的链接桩）
          allowEdge: false,// 是否允许边链接到另一个边
          createEdge() {   // 配置连接线样式
            return new Shape.Edge({
              connector: 'smooth',// 平滑连接器
              attrs: {
                line: {
                  stroke: '#1890FF',
                  strokeWidth: 1,
                  targetMarker: {
                    name: 'classic',
                    size: 7,
                  },
                },
              },
            })
          },
        }
      },
    }
  },
  mounted() {
    this.setAntv();
  },
  methods: {
    setAntv(){
      this.graphConfigure.container = document.getElementById('container')
      this.graph = new Graph(this.graphConfigure)
      // 添加事件
      this.addNode();
      this.addEdge();
      
      let data = JSON.parse(this.fromData)
      this.graph.fromJSON(data) 
    },
    // 对节点添加事件
    addNode(){
      // 对节点添加鼠标移入事件
      // this.graph.on('node:mouseenter', ({ node }) => {
      //   node.addTools({
      //     name: 'button-remove',
      //     args: {
      //       x: 0,
      //       y: 0,
      //       offset: { x: 12, y: 9 },
      //     },
      //   })
      // })
      // 对节点添加鼠标移出事件
      this.graph.on('node:mouseleave', ({ node }) => {
        node.removeTool('button-remove');
      })

      // 对节点添加鼠标双击事件
      this.graph.on('node:dblclick', ({ node, e }) => {
        console.log(e,'666666');
        node.removeTool('node-editor')
        node.addTools({
          name: 'node-editor',
          args: {
            event: e,
            attrs: {
              backgroundColor: '#1890FF',
            },
          },
        })
      })
        
      // 对节点添加鼠标右键事件
      this.graph.on('node:contextmenu', ({ node, e }) => {
        node.addTools({
          name: 'button-remove',
          args: {
            x: 0,
            y: 0,
            offset: { x: 12, y: 9 },
          },
        })
      })

    },
    // 边（连接线）添加事件
    addEdge(){
      /* 连接线添加鼠标移入事件 */
      this.graph.on('edge:mouseenter', ({ edge }) => {
          edge.addTools([
            {
              name: 'button-remove',
              args: {
                distance: '50%',
                offset: 0,
              }
            }
          ])
      })
      /* 连接线添加鼠标移出事件 */
      this.graph.on('edge:mouseleave', ({ edge }) => {
        edge.removeTools()
      })
    },

    // 添加节点
    btnJiedian(value,label){
      let obj = {
        id: value, // String，节点的唯一标识
        x: 40,
        y: 40,
        width: 100,
        height: 60,
        label: label,
        attrs: {
          body: {
            stroke: '#e6e6e6',
            fill: '#ffffff',
            rx: 5,
            ry: 5,
          },
        },
        ports: {// 连接桩
          groups: {
            left: { 
              position: { name: 'left' },
              attrs: {
                circle: {
                  r: 3,
                  magnet: true,
                  stroke: '#e6e6e6',
                  strokeWidth: 2,
                  fill: '#fff',
                },
              },
            },
            right: { 
              position: { name: 'right' },
              attrs: {
                circle: {
                  r: 3,
                  magnet: true,
                  stroke: '#e6e6e6',
                  strokeWidth: 2,
                  fill: '#fff',
                },
              },
            },
          },
          items: [
            {
              id: 'port1',
              group: 'left', // 指定分组名称
            },
            {
              id: 'port2',
              group: 'right', // 指定分组名称
            },
          ],
        },
      }
      this.graph.addNode(obj);

    },

    // 下载
    btnXiazai(){
      this.graph.toPNG((dataUri) => {
        // 下载
        DataUri.downloadDataUri(dataUri, 'chart.png')
      }, {
        width: 900,
        height: 500,
        padding: {
          top: 20,
          right: 0,
          bottom: 80,
          left: 0,
        },
        backgroundColor: '#ffffff',//导出图片的背景色
      })
    },

    // 返回保存的数据
    btnChakan(){
      let getfromJSON = JSON.stringify(this.graph.toJSON())
      this.$emit("fromJSON", getfromJSON);
    },
  }
}
</script>
<style scoped="scoped">
  
</style>
